<template>
  <input type="text" :value="textContent" @input="(e) => { textContent = e.target.value }">
  <p>当前你输入的内容是: {{ textContent }}</p>
  <p>当前你输入的长度是: {{ textContent.length }}</p>
  <hr>

  <div>使用v-model双向绑定</div>
  <input type="text" v-model="textModelContent">
  <p>当前你输入的内容是: {{ textModelContent }}</p>
  <p>当前你输入的长度是: {{ textModelContent.length }}</p>
  <hr>

  <textarea cols="30" rows="10" v-model="textareaContent"></textarea>
  <p>你当前输入的内容为：{{ textareaContent }}</p>
  <hr>

  <div>单一的复选框</div>
  <input type="checkbox" v-model="checked">
  <button @click="checked = !checked">切换选择,目前我是{{ checked }}</button>
  <hr>

  <div>自定义真假值，选中</div>
  <input type="checkbox" :true-value="customTrue" :false-value="customFalse" v-model="customCheck">
  <button @click="toggle">切换选中</button>
  <hr>

  <div>多个复选框</div>
  <div v-for="(item, index) in arr" :key="index">
    <label :for="item.id">{{ item.title }}</label>
    <input type="checkbox" v-model="hobby" :id="item.id" :value="item.value">
  </div>
  <p>{{ message }}</p>
  <hr>

  <div>单选框</div>
  <!-- value值不要漏 -->
  <label for="male">男</label>
  <input type="radio" id="male" v-model="gender" value="男" />
  <label for="female">女</label>
  <input type="radio" id="female" v-model="gender" value="女" />
  <p>{{ gender }}</p>
  <hr>

  <div>下拉列表，单选</div>
  <!-- 下拉列表列表是单选的话，v-model 绑定的值是一个字符串，这个字符串是 option 的 value 值 -->
  <select v-model="hometown1">
    <option value="" disabled>请选择</option>
    <option v-for="(item, index) in hometownList" :key="index" :value="item.key">{{ item.value }}</option>
  </select>
  <p>您选择的家乡为：{{ hometown1 }}</p>

  <div>下拉列表，多选</div>
  <select v-model="hometown2" multiple>
    <option value="" disabled>请选择</option>
    <option v-for="(item, index) in hometownList" :key="index" :value="item.key">
      {{ item.value }}
    </option>
  </select>
  <p>您选择的家乡为：{{ hometown2 }}</p>
  <hr>

  <div>表单相关修饰符:lazy,number,trim</div>
  <!-- lazy修饰符演示 -->
  <input type="text" v-model.lazy="mess1" />
  <p>你输入的是：{{ mess1 }}</p>
  <p>类型为{{ typeof mess1 }}</p>
  <p>长度为{{ mess1.length }}</p>
  <!-- number修饰符演示 -->
  <input type="text" v-model.number="mess2" />
  <p>你输入的是：{{ mess2 }}</p>
  <p>类型为{{ typeof mess2 }}</p>
  <p>长度为{{ mess2.length }}</p>
  <!-- trim修饰符演示 -->
  <input type="text" v-model.trim="mess3" />
  <p>你输入的是：{{ mess3 }}</p>
  <p>类型为{{ typeof mess3 }}</p>
  <p>长度为{{ mess3.length }}</p>

</template>

<script setup>
  import { ref, computed } from 'vue'
  const textContent = ref('普通文本初始值')
  const textModelContent = ref('双向绑定的初始值')
  const textareaContent = ref('文本域')

  const checked = ref(true)
  const customCheck = ref('yes')
  const customTrue = ref('yes')
  const customFalse = ref('no')

  function toggle() {
    customCheck.value === 'yes' ? (customCheck.value = 'no') : (customCheck.value = 'yes')
  }

  const hobby = ref([])
  const arr = ref([
    { id: 'swim', title: '游泳', value: '游个泳' },
    { id: 'run', title: '跑步', value: '跑个步' },
    { id: 'game', title: '游戏', value: '玩个游戏' },
    { id: 'music', title: '音乐', value: '听个音乐' },
    { id: 'movie', title: '电影', value: '看个电影' }
  ])

  const message = computed(() => {
    // console.log(hobby.value);
    if (hobby.value.length === 0) {
      return '请选择爱好'
    } else {
      return `您选择:${hobby.value.join('、')}`
    }
  })

  const gender = ref('保密')
  setTimeout(() => {
    gender.value = '男'
  }, 2000);

  const hometown1 = ref('')
  const hometown2 = ref([])
  const hometownList = ref([
    { key: '成都', value: '成都' },
    { key: '帝都', value: '北京' },
    { key: '魔都', value: '上海' },
    { key: '妖都', value: '广州' },
    { key: '陪都', value: '重庆' }
  ])

  const mess1 = ref('')
  const mess2 = ref('')
  const mess3 = ref('')

</script>

<style lang="scss" scoped></style>
